<template>
  <div class="tabs drag">
    <div class="splitBox noDrag">
      <template v-if="(state.tabIndex === 0) | state.tabs[0]?.hover">
        <div class="tool tool1"></div>
        <div class="tool tool2"></div>
      </template>
    </div>
    <div
      :class="{
        tab: true,
        active: state.tabIndex === index,
        noDrag: true,
        hoverGb: state.tabs[index + 1]?.hover
      }"
      @click="state.tabIndex = index"
      @contextmenu="tabMenu(tab, index)"
      @mouseover="tab.hover = true"
      @mouseout="tab.hover = false"
      v-for="(tab, index) in state.tabs"
      :key="index"
    >
      <template v-if="(index === state.tabIndex - 1) | state.tabs[index + 1]?.hover">
        <div class="tool tool1"></div>
        <div class="tool tool2"></div>
      </template>

      <template v-if="(index === state.tabIndex + 1) | state.tabs[index - 1]?.hover">
        <div class="tool tool3"></div>
        <div class="tool tool4"></div>
      </template>

      <div class="faviconBox" v-if="tab.isLoading || (tab.favicons && tab.favicons[0])">
        <img v-if="tab.isLoading" class="loading" :src="require('../assets/throbber_small.svg')" />
        <img v-if="tab.favicons && tab.favicons[0]" class="favicon" :src="tab.favicons[0]" />
      </div>

      <div class="title">{{ tab.title }}</div>
      <div class="closeBox">
        <span @click.stop="removeTab(index)" class="iconfont iconguanbianniu close"></span>
      </div>
      <div v-if="state.tabIndex != index && state.tabIndex - 1 != index" :class="{ rightBorder: true }">|</div>
    </div>
    <div class="splitBox">
      <template v-if="(state.tabIndex === state.tabs.length - 1) | state.tabs[state.tabs.length - 1]?.hover">
        <div class="tool tool3"></div>
        <div class="tool tool4"></div>
      </template>
    </div>
    <div class="addTabBox">
      <span @click="addTab()" class="iconfont iconadd addTab noDrag"></span>
    </div>
  </div>
</template>
<script lang="ts">
import Tab from '@/store/Tab'
import { state } from '@/store/state'
import mutations from '@/store/mutations'
const { Menu } = window.require('electron').remote

export default {
  setup() {
    for (const tab of state.homeTabs) {
      mutations.addTab({ url: tab.url, webSecurity: tab.webSecurity, nodeIntegration: tab.nodeIntegration })
    }

    return {
      state,
      ...mutations,
      tabMenu(tab: Tab, index: number) {
        const menu = Menu.buildFromTemplate([
          {
            label: '在右侧新增标签页',
            click() {
              mutations.addTab({ index: index + 1 })
            }
          },
          {
            label: '将标签页移至新窗口',
            click: () => {
              alert('not impl')
            }
          },
          {
            type: 'separator'
          },
          {
            label: '重新加载',
            accelerator: 'Control+R',
            click() {
              tab.view.webContents.reload()
            }
          },
          {
            label: '复制',
            click() {
              mutations.addTab({ url: tab.view.webContents.getURL(), index: index + 1, disposition: 'foreground-tab' })
            }
          },
          {
            label: '固定',
            click: () => {
              alert('not impl')
            }
          },
          {
            label: '将这个网站静音',
            click: () => {
              alert('not impl')
            }
          },
          {
            type: 'separator'
          },
          {
            label: '关闭',
            accelerator: 'Ctrl+W',
            click() {
              mutations.removeTab(index)
            }
          },
          {
            label: '关闭其他标签页',
            enabled: state.tabs.length > 1,
            click() {
              while (state.tabs.length > 1) {
                for (let i = 0; i < state.tabs.length; i++) {
                  if (tab !== state.tabs[i]) {
                    mutations.removeTab(i)
                    break
                  }
                }
              }
            }
          },
          {
            label: '关闭右侧标签页',
            enabled: index < state.tabs.length - 1,
            click() {
              while (state.tabs.length - 1 > index) {
                mutations.removeTab(index + 1)
              }
            }
          }
        ])

        menu.popup()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.tabs {
  background: #e7eaed;
  display: flex;
  padding-right: 190px !important;
  margin-right: 4px;
  .tool {
    width: 12px;
    height: 12px;
    position: absolute;
    bottom: 0px;
    &.tool1 {
      right: 0px;
      background: white;
    }
    &.tool2 {
      right: 0px;
      background: #e7eaed;
      border-bottom-right-radius: 50%;
    }
    &.tool3 {
      left: 0px;
      background: white;
    }
    &.tool4 {
      left: 0px;
      background: #e7eaed;
      border-bottom-left-radius: 50%;
    }
  }
  & > .tab {
    flex: 1;
    box-sizing: border-box;
    max-width: 240px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    display: flex;
    flex-direction: row;
    padding: 7px 8px 7px 6px;
    overflow: hidden;
    position: relative;
    &.active {
      background: white !important;
      min-width: 30px;
      & > .tool {
        background: white !important;
      }
    }

    .faviconBox {
      width: 16px;
      height: 16px;
      position: relative;

      .favicon {
        width: 16px;
        height: 16px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }

    .loading {
      & + .favicon {
        width: 10px !important;
        height: 10px !important;
      }
    }

    .title {
      font-size: 13px;
      white-space: nowrap;
      flex: 1;
      margin-left: 4px;
      overflow: hidden;
    }

    .closeBox {
      .close {
        border-radius: 50%;
        font-size: 15px;
        padding: 1px;
        font-weight: bold;
        color: #3c4043;
        &:hover {
          background: #cfd1d4;
        }
      }
    }
    .rightBorder {
      color: #888888;
      font-size: 12px;
      position: absolute;
      right: 0px;
      top: 50%;
      transform: scale(1, 1.5) translateY(-40%);
    }

    &:hover {
      & > .tool {
        background: #f2f2f2;
        transition: background 0.3s;
      }
      background: #f2f2f2;
      transition: background 0.3s;
      .rightBorder {
        color: transparent;
        transition: color 0.3s;
      }
    }
    &.hoverGb {
      .rightBorder {
        color: transparent;
        transition: color 0.3s;
      }
    }
  }
  .splitBox {
    position: relative;
    width: 12px;
  }

  .addTabBox {
    padding: 8px 0 8px 0;
    .addTab {
      font-size: 15px;
      border-radius: 50%;
      padding: 5px;
      &:hover {
        background: #bfc2c7;
        transition: background 0.8s;
      }
      &:active {
        background: #a8abb0;
      }
    }
  }
}
</style>
